<template>
    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <el-divider content-position="left">车辆信息</el-divider>
            <el-form :model="form" label-width="120px">
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="车牌号">
                            <el-input v-model="form.license" placeholder="请输入车牌号" />
                        </el-form-item>
                        <el-form-item label="所在校区">
                            <el-select v-model="form.school" placeholder="选择所在校区">
                                <el-option :label="item.schoolName" :value="item.schoolName" v-for="item in schoollist"
                                    :key="item.objectId" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="负责教练">
                            <el-select v-model="form.coach" placeholder="选择教练">
                                <el-option :label="item.name" :value="item.name" v-for="item in coachlist"
                                    :key="item.objectId" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <div>
                            <ImgUpload v-model="form.poster" />
                        </div>
                    </el-col>
                </el-row>
                <el-divider content-position="left">考试&预警</el-divider>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="科目">
                            <el-select v-model="form.subject" placeholder="选择科目">
                                <el-option label="科目二" value="科目二" />
                                <el-option label="科目三" value="科目三" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="类型">
                            <el-select v-model="form.type" placeholder="选择车辆类型">
                                <el-option label="教练车" value="教练车" />
                                <el-option label="考试车" value="考试车" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="公里数">
                            <el-input v-model="form.km" placeholder="请输入公里数" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="登记时间">
                            <el-date-picker v-model="formdate.register" type="date" placeholder="选择登记时间" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="购买时间">
                            <el-date-picker v-model="formdate.purchase" type="date" placeholder="选择购买时间" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="年审到期">
                            <el-date-picker v-model="formdate.annual" type="date" placeholder="请选择年审到期时间" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="道路运输">
                            <el-date-picker v-model="formdate.convey" type="date" placeholder="请选择道路运输到期时间" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="交强险">
                            <el-date-picker v-model="formdate.mandatory" type="date" placeholder="请选择交强险时间" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="商业险">
                            <el-date-picker v-model="formdate.business" type="date" placeholder="请选择商业险时间" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="钢瓶到期">
                            <el-date-picker v-model="formdate.steel" type="date" placeholder="请选择钢瓶到期时间" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">{{ num == 1 ? '添加车辆' : '编辑车辆' }}</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import ImgUpload from '../../../components/img-upload.vue';
import { handleDate } from '../../../utils/tools'
import { coachGet } from '../../../api/coachmange';
import { SchoolGet } from '../../../api/car';
import { CarPost, CarUpdate } from '../../../api/car'
import { CarTypes } from '../../../types/car';
const coachlist = ref<{ name: string, objectId: string }[]>([])
// 获取教练
let res = await coachGet()
coachlist.value = res.data.results
// 获取校区
const schoollist = ref<{ schoolName: string, objectId: string }[]>([])
let school = await SchoolGet()
schoollist.value = school.data.results
interface PropsType {
    num: number;
    carData: CarTypes | undefined;
}
const props = defineProps<PropsType>()

let form = reactive<CarTypes>({
    license: '',
    school: '',
    poster: '',
    type: '',
    subject: '',
    km: '',
    coach: '',
    register: '',
    purchase: '',
    annual: '',
    business: '',
    mandatory: '',
    steel: '',
    convey: '',
})
let formdate = reactive({
    register: '',
    purchase: '',
    annual: '',
    convey: '',
    mandatory: '',
    business: '',
    steel: '',
})

if (props.carData) {
    form = props.carData
    formdate = props.carData
}

const onSubmit = () => {
    // console.log(formdate);
    form.register = handleDate(formdate.register)
    form.purchase = handleDate(formdate.purchase)
    form.annual = handleDate(formdate.annual)
    form.convey = handleDate(formdate.convey)
    form.mandatory = handleDate(formdate.mandatory)
    form.business = handleDate(formdate.business)
    form.steel = handleDate(formdate.steel)

    if (props.num == 1) {
        // 新增车辆
        CarPost(form)
    } else {
        // 编辑车辆
        let { objectId } = props.carData!
        delete form.createdAt
        delete form.updatedAt
        console.log(form);
        CarUpdate(objectId as string, form)
    }
}


</script>

<style lang="scss">
.el-divider__text {
    font-size: 20px;
    color: #666;
}
</style>../../../api/dapao-school